<template>
  <div class="job_item">
    <div class="jobCard" @click="publishJobInfo(jobItem)">
      <van-row type="flex" align="top" justify="space-between" class="job_salary">
        <van-col span="11" class="job">{{ jobItem.enterprise_name }}</van-col>
        <van-col span="12" class="salary_mode">{{ computedMoneyModeText }}</van-col>
      </van-row>

      <van-row type="flex" align="center" justify="space-between" class="jobType_rating">
        <van-col span="10" class="jobType">
          <span>{{ jobItem.recruiting_position }}</span>
        </van-col>
        <van-col span="14" class="salary">
          综合薪资：<span>{{ jobItem.min_comprehensive_salary }} - {{ jobItem.max_comprehensive_salary }}</span>
        </van-col>
      </van-row>

      <van-row type="flex" align="center" justify="space-between" class="jobType_rating">
        <van-col span="12" class="jobType">
          <span>{{ jobCategoryObj[jobItem.job_category_id] }}</span>
        </van-col>

        <van-col span="12" class="rating">
          <span>代招费：</span>
          <span>{{ jobItem.generation_of_commission }}{{ feeUnitObj[jobItem.fee_unit] }}</span>
        </van-col>
      </van-row>

      <van-row class="time_status_sheet" type="flex" align="center" justify="space-between">
        <van-col span="15" class="time">
           提交时间：<span>{{jobItem.create_time}}</span>
        </van-col>

        <van-col
          span="4"
          class="status"
        >
          <van-button size="mini" type="info" @click.stop="copyJobInfoUrl(jobItem)" >复制链接</van-button>
        </van-col>
        <van-col
          span="4"
          class="status"
        >
          <van-button size="mini" color="#B223ED" @click.stop="publishJobInfo(jobItem)">去发布</van-button>
        </van-col>
      </van-row>

      <!-- 2022-04-09新需求：招聘信息备注         -->
      <van-row
        class="job_notes"
        type="flex"
        justify="start"
        v-show="jobItem.job_notes"
      >
        <van-col span="6" class="notes_title">
          <span>招聘信息备注：</span>
        </van-col>
        <van-col span="18" class="notes_text">
          <span>{{jobItem.job_notes || '无'}}</span>
        </van-col>
      </van-row>

      <!--  2022-04-11 新需求    -->
      <van-row
        class="job_action"
        type="flex"
        justify="start"
      >
        <van-col span="18">
          <span class="action_title">（谨慎）操作：</span>
          <van-button class="action_btn" size="mini" type="danger" @click.stop="deleteJobInfo(jobItem)">删除</van-button>
        </van-col>
      </van-row>

    </div>
  </div>
</template>

<script>
import jobCategoryObj from '../../../../constants/jobCategoryObj'
import {payMoneyModeObj} from '../../../../constants/payMoneyMode'
import {feeUnitObj} from '../../../../constants/comUtils';
import {base_url_path} from "../../../../constants/comUtils";

import {mapGetters} from 'vuex'
import {Dialog, Toast} from "vant";

export default {
  name: "jobItemForSheet",
  props: ['jobItem', 'keyWord', 'parentSearchParams'],

  data(){
    return {
      jobCategoryObj,
      feeUnitObj,
      payMoneyModeObj,
      base_url_path,
    }
  },

  computed: {
    ...mapGetters(['allUserInfo']),
    computedMoneyModeText() {
      const res2 = this.payMoneyModeObj[this.jobItem.payway_id]
      if (res2) {
        const res_job = res2.split('+')
        if (this.jobItem.second_value_input && this.jobItem.third_value_input) {
          return (
            res_job[0].trim() +
            this.jobItem.first_value_input +
            ' + ' +
            res_job[1].trim() +
            this.jobItem.second_value_input +
            ' + ' +
            res_job[2].trim() +
            this.jobItem.third_value_input
          )
        } else if (this.jobItem.second_value_input) {
          return (
            res_job[0].trim() +
            this.jobItem.first_value_input +
            ' + ' +
            res_job[1].trim() +
            this.jobItem.second_value_input
          )
        } else {
          return res_job[0].trim() + this.jobItem.first_value_input
        }
      }
    },
  },

  methods: {
    toDetail(id) {
      if (this.routeName != 'jobDetail') {
        // 跳转至详情页
        this.$router.push({
          path: '/jobDetail',
          query: {
            id,
            sign_state: this.jobItem.sign_state,
            sign_remark: this.jobItem.sign_remark,
            keyword: 'jobSheet',
          }
        })
      };
    },

    publishJobInfo(jobItem){
      // 代招人修改（我发出去的申请表的就由我修改）
      if (this.keyWord === 'myCompany_jobSheet'){
        // todo 招聘信息录入页
        /*this.$router.push({
          path: '/info',
          query: {
            // 将传递的对象解析为字符串
            jobId: jobItem.id,
          }
        });*/

        let jobObj = {
          job_category_id: jobItem.job_category_id,
          job_id: jobItem.ids,
          // 审核的职位
          keyword: 'jobSheet',
        };

        this.$router.push({
          path: '/myCompany/canShareAndAuditState',
          query: {
            // 将传递的对象解析为字符串
            jobObj: JSON.stringify(jobObj)
          }
        })
      }
    },

    deleteJobInfo(jobItem){
      Dialog.confirm({
        title: '谨慎操作',
        message: `招聘企业为：【${jobItem.enterprise_name}】，招聘职位为：【${jobItem.recruiting_position}】。你确定删除这个收集表吗？`,
        messageAlign: 'left',
      }).then(() => {

        // 删除接口
        // console.log('父组件的方法', this.$parent.$parent._getJobSheet);
        this.$api.others.deleteJobSheet(jobItem.ids).then((resp)=> {
          Toast('删除成功!');
          // 需要调用父组件的方法
          this.$parent.$parent._getJobSheet(this.parentSearchParams);
        });

      }).catch(() => {
          // on cancel
        });
    },

    copyJobInfoUrl(jobItem){
      // 谁填写的谁修改
      let pathUrl = `${this.base_url_path}/#/info?jobId=${jobItem.ids}&ids=${this.allUserInfo.id}&sId=${jobItem.id}`;
      // let pathUrl = `${this.base_url_path}/#/jobDetail?id=${jobItem.id}&ids=${this.allUserInfo.ids}`;

      this.$copyText(pathUrl).then(
        function (e) {
          Toast('复制成功')
        },
        function (e) {
          Toast('复制出错了！');
        }
      )
    },


  }
}
</script>

<style lang="scss" scoped>
.job_item {
  .jobCard {
    background-color: #ffffff;
    border-bottom: 0.6px solid #e6e6e6;
    margin: 0;
    padding: 9px 15px;
    font-size: 13px;
    color: #848484;
    .job_salary {
      font-size: 14px;
      //border: 1px solid red;
      .job {
        // width:auto;
        font-size: 16px;
        font-weight: bolder;
        color: #030303;
        //border: 1px solid blue;
        white-space: pre-wrap;
        word-break: break-all;
      }
      .salary_mode {
        color: blue;
        font-weight: bolder;
        font-size: 12px;
        text-align: right;
        white-space:pre-wrap;
        word-break:break-all;
      }
    }
    .jobType_rating {
      font-size: 15px;
      margin: 6px 0;
      color: #030303;
      .salary {
        text-align: right;
        span {
          color: #fc525d;
        }
      }
      .rating {
        text-align: right;
      }
    }
    .address_agencyFee {
      color: #363636;
      .agencyFee {
        text-align: right;
      }
    }
    .address_distance {
      color: #5f5f5f;
      margin: 6px 0;
      .address_work {
        text-align: right;
      }
    }
    .time_status_sheet {
      margin-top: 5px;
      flex-wrap: nowrap;
      .status {
        text-align: right;
        white-space: nowrap;
        //   display: flex;
        // flex-direction: column;
        // justify-content: space-between;
      }

      .status_score {
        margin-right: 15px;
      }
      .statusPopup {
        box-sizing: border-box;
        padding: 30px 0px;
        overflow: hidden;
        div {
          display: flex;
          // width: 100%;
          // justify-content: space-around;
          padding: 10px 0;
          border-radius: 10px;
          // margin: 0 5px;
          span {
            text-align: center;
            font-size: 16px;
            user-select: none;
            &:first-child {
              width: 80px;
              border-right: 1px solid #a3a3a3;
            }
            &:last-child {
              margin-left: 10px;
            }
          }
          &.active {
            color: red;
            // background: #f7f7f7;
            box-shadow: 0 0 3px 0 #d2d2d2;
            span {
            }
          }
        }
        button {
          display: flex;
          width: 95%;
          justify-content: center;
          align-items: center;
          margin: 15px auto 5px auto;
          span {
            border: none !important;
          }
        }
      }
    }
    .job_notes{
      font-size: 12px;
      color: black;
      margin-top: 6px;
      .notes_title{
        font-weight: bolder;
        color: #007aff;
      }
      .notes_text{
        text-align: justify;
      }
    }

    .job_action{
      font-size: 12px;
      color: black;
      margin-top: 10px;
      .action_title{
        font-weight: bolder;
        color: red;
      }
      .action_btn{
        padding: 0 16px;
      }
    }
  }
  .activeOption {
    font-weight: bolder;
    color: #ee0a24;
  }
}
</style>
